<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData"
			@onShare="onShare"></userinfo-card>
		<!-- #ifdef MP-WEIXIN -->
		<view class="wrap-bg" :style="[{'background-image':'url('+base64img+')'}]">
		<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="wrap-bgs">
			<!-- #endif -->
				<!-- @tap="$Router.push('/pages/user/info')" -->
				<view class="flex" style="padding: 60rpx 30rpx;justify-content: space-between;margin-bottom: 60rpx;">
					<view class="flex">
						<view @tap.stop="userlogin" class="head-img-wrap">
							<image class="head-img" :src="userInfo.avatar || $IMG_URL + '/imgs/base_avatar.png'"
								mode="aspectFill"></image>
						</view>
						<view class="flex" style="flex-direction: column;align-items: flex-start;padding-left: 30rpx;">
							<view class="name">
								{{ userInfo.nickname || '请登录~' }}
							</view>
							<view class="level">
								Level：{{userInfo.level}}
							</view>
						</view>
					</view>
					<view class="">
						<u-icon name="arrow-right" size="28" color="#fff"></u-icon>
					</view>
				</view>
				<view class="" style="background-color: #fff;border-radius: 20px 20px 0 0px;
				padding: 0 10px 10px 10px;position: relative;">
					<view class="" style="background-color: #fff;padding: 10px;border-radius: 40rpx;box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
						position: absolute;top: -58rpx;width: 92%;left: 4%;">
						<view class="flex" style="justify-content: space-around;padding:0 30px;">
							<view class="flex" style="flex-direction: column;">
								<text style="font-weight: 400;font-size: 24rpx;color: #131314;">查询次数</text>
								<text
									style="font-weight: 700;font-size: 32rpx;color: #E77817;padding-top: 10rpx;">251次</text>
							</view>
							<view class=""
								style="width: 2rpx;height: 88rpx;background: #21201E;border-radius: 0rpx 0rpx 0rpx 0rpx;opacity: 0.05;">

							</view>
							<view class="flex" style="flex-direction: column;">
								<text style="font-weight: 400;font-size: 24rpx;color: #131314;">积分余额</text>
								<text
									style="font-weight: 700;font-size: 32rpx;color: #E77817;padding-top: 10rpx;">{{userInfo.score}}积分</text>
							</view>
						</view>
					</view>
					<view class="" style="padding-top: 90rpx;padding-left: 10px;padding-right: 10px;">
						<view class="flex setlist" style="" @click="navTo(it)" v-for="(it,index) in setup_list"
							:key="index">
							<view class="flex">
								<image style="width: 48rpx;height: 48rpx;" :src="it.img" mode=""></image>
								<view class=""
									style="font-weight: 400;font-size: 28rpx;color: #131314;padding-left: 30rpx;">
									{{it.name}}
								</view>
							</view>
							<view class="">
								<u-icon color="#717171" name="arrow-right" size="32"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
			<!-- 关注弹窗 -->
			<shopro-float-btn></shopro-float-btn>
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
			<!-- 分享组件 -->
			<shopro-share v-model="showShare" posterType="user"></shopro-share>
			<!-- <shopro-tabbar></shopro-tabbar> -->
		</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import userinfoCard from './user/userinfo-card.vue';
	import share from '@/shopro/share';

	export default {
		components: {
			userinfoCard
		},
		data() {
			return {
				showModal: false,

				scrollTop: 0,
				showShare: false,
				enable: false, //是否开启吸顶。
				base64img: '',
				setup_list: [{
						id: 1,
						name: '查询记录',
						img: '/static/user/1.png'
					},
					{
						id: 2,
						name: '积分明细',
						img: '/static/user/2.png'
					},
					{
						id: 6,
						name: '我的地址',
						img: '/static/user/6.png'
					},
					{
						id: 3,
						name: '我的订单',
						img: '/static/user/3.png'
					},
					{
						id: 7,
						name: '技术分享',
						img: '/static/user/7.png'
					},
					{
						id: 4,
						name: '分享好友',
						img: '/static/user/4.png'
					},
					{
						id: 5,
						name: '设置',
						img: '/static/user/5.png'
					}

				]
			};
		},
		computed: {
			...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
			userHeadData() {
				if (this.userTemplate?.length) {
					return this.userTemplate[0].content;
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		onShow() {
			this.base()
			this.isLogin = uni.getStorageSync('isLogin')
			if (this.isLogin) {
				this.init();
				// this.getUserData();
			}
			this.enable = true;

		},

		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
			onShare() {
				this.showShare = true;
				uni.hideTabBar();
			},
			userlogin() {
				if (this.isLogin) {
					return
				}
				uni.navigateTo({
					url: '/pages/user/login/login'
				})
			},
			navTo(e) {
				switch (e.id) {
					case 1:
						uni.navigateTo({
							url: '/pages/user/depotLog/depotLog'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/user/scoreList/scoreList'
						})
						break;
					case 3:
						uni.navigateTo({
							url: 'pages/order/list'
						})
						break;
					case 5:
						uni.navigateTo({
							url: '/pages/user/setup/setup'
						})
						break;
					case 6:
						uni.navigateTo({
							url: '/pages/user/address/list'
						})
						break;
					case 7:
						uni.navigateTo({
							url: '/pages/share/list'
						})
						break;
				}
			},
			// 将线上图片转换为base64
			imageToBase64(imageUrl) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: imageUrl, // 图片的URL
						method: 'GET',
						responseType: 'arraybuffer', // 设置响应类型为arraybuffer以接收二进制数据
						success: (res) => {
							if (res.statusCode === 200) {
								// 将arraybuffer转为base64
								let base64Image = uni.arrayBufferToBase64(res.data);
								// 添加数据前缀
								base64Image = 'data:image/jpeg;base64,' + base64Image;
								resolve(base64Image);
							} else {
								reject(new Error('请求图片失败，状态码：' + res.statusCode));
							}
						},
						fail: (error) => {
							reject(error);
						}
					});
				});
			},
			base() {
				// #ifndef MP-WEIXIN
				this.base64img = '../../static/user/mebg.png'
				// #endif
				// #ifdef MP-WEIXIN
				// 使用示例
				this.imageToBase64('https://www.shiwangdaoju.cn/assets/img/mebg.png').then(base64 => {
					// console.log(base64); // 输出图片的base64编码
					this.base64img = base64
				}).catch(error => {
					console.error(error); // 输出错误信息
				});
				// #endif
			},
			// 初始化
			init() {
				// let that = this
				// that.$http('user.users', '', '加载中...').then((res) => {
				// 	console.log(res);
				// })
				this.getUserInfo()
					.then(res => {
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			}
		}
	};
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss">
	.copyright-box {
		.copyright-text {
			font-size: 22rpx;
			font-weight: 500;
			color: #c4c4c4;
		}
	}

	.wrap-bg {
		height: 406rpx;
		width: 100%;
		background-size: 100% 100%;
		position: fixed;
		// background-image: url('../../static/images/mebg.png');
	}

	.wrap-bgs {
		height: 406rpx;
		width: 100%;
		background-image: url('../../static/user/mebg.png');
		background-size: 100% 100%;
		position: fixed;
	}

	.name {
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.level {
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-top: 10rpx;
	}

	.setlist {
		justify-content: space-between;
		margin-top: 60rpx;
	}

	.head-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: #ccc;
		margin-right: 25rpx;
		overflow: hidden;
	}
</style>